<section class="content">
    @if($errors->any())
        <div class="alert alert-danger alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <h4><i class="icon fa fa-ban"></i>Error</h4>
            <p>{{$errors->first()}}</p>
        </div>
    @endif
    <div class="row">
        <div class="col-md-12">
            <div class="box box-info">
                <div class="box-header with-border">
                    <h3 class="box-title">编辑</h3>

                    <div class="box-tools">
                        <div class="btn-group pull-right" style="margin-right: 5px">
                            <a href="{{url('admin/project')}}" class="btn btn-sm btn-default" title="列表"><i
                                    class="fa fa-list"></i><span class="hidden-xs">&nbsp;列表</span></a>
                        </div>
                    </div>
                </div>
                <!-- /.box-header -->
                <!-- form start -->

                <form action="{{$action}}" method="post" class="form-horizontal "
                      accept-charset="UTF-8" pjax-container="">

                    <div class="box-body">

                        <div class="fields-group">

                            <div class="col-md-12">
                                @if(!empty($info))
                                    <div class="form-group">
                                        <label class="col-sm-2  control-label">项目ID</label>
                                        <div class="col-sm-8">
                                            <div class="box box-solid box-default no-margin">

                                                <div class="box-body">
                                                    {{$info['id']}}&nbsp;
                                                </div>

                                            </div>


                                        </div>
                                    </div>
                                @endif
                                <div class="form-group">

                                    <label for="name" class="col-sm-2 asterisk control-label">项目名称</label>

                                    <div class="col-sm-8">


                                        <div class="input-group">

                                                <span class="input-group-addon"><i
                                                        class="fa fa-pencil fa-fw"></i></span>

                                            <input required="1" type="text" id="name" name="name"
                                                   value="{{$info['name']??''}}"
                                                   class="form-control name" placeholder="输入项目名称">


                                        </div>


                                    </div>
                                </div>
                                <div class="form-group">

                                    <label for="desc" class="col-sm-2 asterisk control-label">项目描述</label>

                                    <div class="col-sm-8">


                                        <div class="input-group">

                                                <span class="input-group-addon"><i
                                                        class="fa fa-pencil fa-fw"></i></span>

                                            <input required="1" type="text" id="desc" name="desc"
                                                   value="{{$info['desc']??''}}"
                                                   class="form-control desc" placeholder="输入项目描述">


                                        </div>


                                    </div>
                                </div>
                                <div class="form-group">

                                    <label for="leader"
                                           class="col-sm-2 asterisk control-label">项目负责人</label>

                                    <div class="col-sm-8">


                                        <div class="input-group">

                                                <span class="input-group-addon"><i
                                                        class="fa fa-pencil fa-fw"></i></span>

                                            <input required="1" type="text" id="leader" name="leader"
                                                   value="{{$info['leader']??''}}"
                                                   class="form-control leader" placeholder="输入项目负责人">


                                        </div>


                                    </div>
                                </div>
                                <div class="form-group">

                                    <label for="leader_phone"
                                           class="col-sm-2 asterisk control-label">负责人手机</label>

                                    <div class="col-sm-8">


                                        <div class="input-group">

                                                        <span class="input-group-addon"><i
                                                                class="fa fa-phone fa-fw"></i></span>

                                            <input required="1" style="width: 150px" type="text"
                                                   id="leader_phone"
                                                   name="leader_phone" value="{{$info['leader_phone']??''}}"
                                                   class="form-control leader_phone"
                                                   placeholder="输入 负责人手机">


                                        </div>


                                    </div>
                                </div>
                                <div class="form-group">

                                    <label for="status" class="col-sm-2  control-label">状态</label>

                                    <div class="col-sm-8" style="margin-top: 6px">
                                        <input type="radio" name="status" value="0" class="minimal status"
                                        >&nbsp;禁用&nbsp;&nbsp;

                                        <input type="radio" name="status" value="1" class="minimal status"
                                               checked="">&nbsp;正常&nbsp;&nbsp;
                                    </div>
                                </div>
                                <div class="form-group">

                                    <label for="state" class="col-sm-2  control-label">项目状态</label>

                                    <div class="col-sm-8" style="margin-top: 6px">

                                        <input type="radio" name="state" value="1" class="minimal state"
                                               checked="">&nbsp;进行中&nbsp;&nbsp;

                                        <input type="radio" name="state" value="2" class="minimal state"
                                        >&nbsp;已结束&nbsp;&nbsp;

                                    </div>
                                </div>
                                <div class="form-group">

                                    <label for="lat" class="col-sm-2  control-label">中心点位置</label>

                                    <div class="col-sm-8">


                                        <div class="row">

                                            <div class="col-md-12">
                                                <div class="input-group">
                                                    <input type="text" class="form-control"
                                                           name="center_pos"
                                                           value="{{$info['center_pos']??''}}"
                                                           id="tipinput">
                                                    <span class="input-group-btn">
                        <button type="button" onclick="searchLatLng()" class="btn btn-info btn-flat"><i
                                class="fa fa-search"></i></button>
                    </span>
                                                </div>
                                            </div>

                                        </div>
                                        <span class="help-block">
    <i class="fa fa-info-circle"></i>&nbsp;确定中心位置后鼠标点击地图描绘区域,双击完成绘制
</span>
                                        <br>

                                        <div id="container" style="width: 100%;height: 600px;position: relative">

                                        </div>
                                        <div class="input-card" style="width: 120px">
                                            @if(empty($info))
                                            <input type="button" class="btn" onclick="clearPolygon()" value="重置" style="margin-bottom: 5px">
                                            @else
                                            <input type="button" class="btn" onclick="polyEditor.open()" value="重新编辑" style="margin-bottom: 5px">
                                            <input type="button" class="btn" onclick="endEdit()" value="结束编辑" style="margin-bottom: 5px">
                                            @endif
                                        </div>

                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>
                    <!-- /.box-body -->

                    <div class="box-footer">

                        <input type="hidden" name="_token" value="{{csrf_token()}}">
                        <input type="hidden" name="lat" id="lat" value="{{$info['lat']??''}}">
                        <input type="hidden" name="lng" id="lng" value="{{$info['lng']??''}}">
                        <input type="hidden" name="address" id="address" value="{{$info['address']??''}}">
                        <input type="hidden" name="coords" id="coords" value="{{$info['coords']??''}}">
                        <input type="hidden" name="province" id="province" value="{{$info['province']??''}}">
                        <input type="hidden" name="city" id="city" value="{{$info['city']??''}}">
                        <input type="hidden" name="district" id="district" value="{{$info['district']??''}}">
                        <div class="col-md-2">
                        </div>

                        <div class="col-md-8">

                            <div class="btn-group pull-right">
                                <button type="submit" class="btn btn-primary">提交</button>
                            </div>


                        </div>
                    </div>
                    @if(!empty($info))
                        <input type="hidden" name="_method" value="PUT" class="_method">

                    @endif
                    <!-- /.box-footer -->
                </form>
            </div>

        </div>
    </div>

</section>
<style>
    .amap-icon img,
    .amap-marker-content img {
        width: 25px;
        height: 34px;
    }

    .input-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border-radius: 0.25rem;
        width: 22rem;
        border-width: 0;
        border-radius: 0.4rem;
        box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
        position: absolute;
        bottom: 1rem;
        right: 1.6rem;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        padding: 0.75rem 1.25rem;
    }
</style>
<script
    src="https://webapi.amap.com/maps?v=2.0&key=02e3e129fa609a8ff26eb670eb855f32&plugin=AMap.Geocoder,AMap.MouseTool,AMap.PolygonEditor"></script>
<script type="text/javascript">
    {{--var coords = {!! $info['coords'] !!};--}}
    var _polygon = @json($_polygon??'');
    var markers = [];
    //初始化地图
    var map = new AMap.Map('container', {
        @if(!empty($info))
        zoom: 19, //初始地图级别
        @endif
        @if(!empty($info))
        center: [{{$info['lng']}}, {{$info['lat']}}],
        @endif
        resizeEnable: true
    });

    var geocoder = new AMap.Geocoder({
        city: '全国'  // 地址所在城市，默认全国范围内
    });
    @if(!empty($info))
    var marker = new AMap.Marker({
        position: [{{$info['lng']}}, {{$info['lat']}}],
        map: map,
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png'
    });
    @endif

    //输入提示
    var autoOptions = {
        input: "tipinput",

    };

    AMap.plugin(['AMap.AutoComplete'], function () {
        var auto = new AMap.AutoComplete(autoOptions);

        auto.on("select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
            dingwei(e.poi.name)
        }
    });


    function dingwei(address) {
        geocoder.getLocation(address, function (status, result) {
            console.log(result)
            if (status === 'complete' && result.info === 'OK') {
                var location = result.geocodes[0].location;  // 地理编码结果
                $('#lat').val(location.lat);
                $('#lng').val(location.lng);
                $('#address').val(result.geocodes[0].formattedAddress);
                $('#province').val(result.geocodes[0].addressComponent.province);
                $('#city').val(result.geocodes[0].addressComponent.city);
                $('#district').val(result.geocodes[0].addressComponent.district);
                map.setCenter(location);  // 设置地图中心点为地址的经纬度
                map.setZoom(19);
                // 在地图上添加定位标记
                var marker = new AMap.Marker({
                    position: location,
                    map: map,
                    icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png'
                });
            } else {
                console.log('根据地址定位失败');
            }
        });
    }


    function searchLatLng() {
        var content = $('#tipinput').val();
        dingwei(content);
    }

    var mouseTool = new AMap.MouseTool(map);
    //监听draw事件可获取画好的覆盖物
    var overlays = [];
    mouseTool.on('draw', function (e) {
        overlays.push(e.obj);
        console.log(e.obj._opts.path, 333)
        markers = e.obj._opts.path;
        $('#coords').val(markers)
    });

    function draw() {
        mouseTool.polygon({
            fillColor: '#00b0ff',
            strokeColor: '#80d8ff'
            //同Polygon的Option设置
        });
    }

    draw();

    var polygon = new AMap.Polygon({
        path: _polygon,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        zIndex: 50,
        bubble: true,
    });
    map.add([polygon])

    function clearPolygon() {
        map.remove(overlays);
        map.remove(polygon);
        $('#coords').val('');
    }

    var polyEditor;
    polyEditor = new AMap.PolygonEditor(map, polygon);
    function endEdit(){
        polyEditor.close();
        console.log(polygon._opts.path)
        $('#coords').val(polygon._opts.path)
    }
</script>
